<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_图片插入</title>
</head>
<body>
    <!--右键选中.html文件 "open in" "Exploer" 打开html文件所在的位置-->
    <!--相对路径：
        图片路径是从当前要插入图片的html出发去找资源
        1)图片与html在同一级目录：直接写图片全名
        2)图片在html文件的下一级目录，先写目录名，在写下级目录中的图片全名
        3)图片在html文件的上一级目录，先../回到上一级,在写上级目录中的图片全名-->
    <img src="1.png" alt="">
    <img src="img/2.png" alt="">
    <img src="../3.png" alt="">
    <!--绝对路径:从根（协议/盘符）开始出发去找资源-->
    <img src="https://cdn.tmooc.cn/bsfile//courseImg///94D557C1DBB44FDA909B3B2BDC433A28.png" alt="">
    <hr>
    <!--alt用来设置图片无法正常显示时的替换文字-->
    <img src="abc" alt="这张图片被偷走了">
    <hr>
    <!--width设置图片宽度 height设置图片高度
    图片失真：图片的宽高比例不对 压缩或拉伸了
    图片本身是有大小和宽高比的,可以只设置宽高其中的一个属性,另外一个会跟着改-->
    <img src="karry.jpg" width="200px" height="200px">
    <img src="karry.jpg" width="200px">
    <img src="karry.jpg" height="200px">
</body>
</html>